<template>
  <view>
    <view class="box" >
      <view class="mt35 re pl40 pr40" style="z-index: 2;">
        <view class="re img-box">
          <!-- <view class="feedback_btn_pos">结果不准？点击反馈</view> -->
          <image :src="data.image" mode="aspectFit" class="max_img_sty"></image>
        </view>
        <view class="commodity_list">
          <view class="item_box" @click="toPath('/pages/product/detail?id=' +item.product_id )" v-for="item in data.product" :key="item.product_id">
            <image :src="item.image" class="commodity_img" ></image>
            <view class="pa15">
              <view class="fs24 lh36 cor_333">{{item.product_name}}</view>
              <view class="mt30 flex_box aic">
                <view class="item">
                  <view class="fs32 fwb cor_F86">￥{{item.max_price}}</view>
                  <view class="mt15 fs24 fwb cor_666">预估可卖</view>
                </view>
                <view class="exchange_money_btn">去换钱</view>
              </view>
            </view>
          </view>
        </view>
        
      </view>
      
      <image src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/icon_top_bg.png" class="top_bg_pos"></image>
      
    </view>
  </view>
</template>

<script setup lang="ts">
	import { onLoad, onShow, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app'
	import { getToken } from '@/utils/auth'
	import { reactive, ref} from 'vue'
	import { imgSearchRes} from '@/api/product'
	
	const data = reactive({
		product:[],
		image:'',
	})
	const toPath = (link : any) => {
		uni.navigateTo({
			url: link
		})
	}
	onLoad((e) => {
		getInfo(e.id);
	})
	
	const  getInfo = async (id:any) => {
	    let res = 	await imgSearchRes({id:id});
		data.product = res.product;
		data.image = res.image;
		// data.log = res.log;
		// data.my_integral = res.my_integral;
		// data.num = res.num;
		// data.search_image_price = res.search_image_price;
		// loading.value = false;
	}
	// getInfo();
 
</script>

<style>
  
  page { background: #F4F8F9;padding-bottom: env(safe-area-inset-bottom); }
  
  .navbar { background: transparent; }
  
  .curnav.navbar {
  	background: #fff;
  }
  
 /* .img-box{
	  width: 100%;
	  height: 670rpx;
	  background-color: #fff;
  } */
  
  .top_bg_pos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 486rpx;
    z-index: 1;
  }
  
  .max_img_sty {
    position: relative;
    width: 100%;
    height: 670rpx;
    border-radius: 24rpx;
	  background-color: #fff;
  }
  
  .feedback_btn_pos {
    position: absolute;
    right: 16rpx;
    bottom: 16rpx;
    padding: 0 20rpx;
    height: 68rpx;
    line-height: 68rpx;
    font-size: 28rpx;
    color: #fff;
    background: #E12824;
    border-radius: 16rpx;
    z-index: 2;
  }
  
  .commodity_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .commodity_list .item_box {
    position: relative;
    padding: 8rpx;
    width: 324rpx;
    height: 508rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    box-shadow: 0rpx 24rpx 160rpx 0rpx rgba(8,23,45,0.04);
    margin-top: 32rpx;
  }
  
  .commodity_list .item_box .commodity_img {
    position: relative;
    width: 100%;
    height: 315rpx;
    border-radius: 16rpx;
  }
  
  .exchange_money_btn {
    position: relative;
    padding: 0 18rpx;
    height: 58rpx;
    line-height: 58rpx;
    font-size: 24rpx;
    color: #fff;
    background: linear-gradient(135deg, #12E39F 0%, #96EA1A 100%);
    border-radius: 12rpx;
  }

</style>
